<template>
  <el-card>
    <el-form :model="searchParam" :inline="true">
      <el-form-item label="角色名称">
        <el-input
          v-model="searchParam.roleName"
          placeholder="请输入角色名称"
          clearable
          @keyup.enter="getTableData"
        />
      </el-form-item>
      <el-form-item label="状态">
        <el-select
          v-model="searchParam.status"
          placeholder="请选择角色状态"
          @keyup.enter="getTableData"
        >
          <el-option
            v-for="(value, key, index) in roleStatus"
            :key="index"
            :label="value"
            :value="key"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <commonBtn
          :value="'搜索'"
          :type="'primary'"
          :icon="'search'"
          :plain="true"
          @click="getTableData"
        ></commonBtn>
        <commonBtn
          :value="'重置'"
          :icon="'refresh'"
          @click="refreshFn"
        ></commonBtn>
      </el-form-item>
    </el-form>
    <el-row>
      <commonBtn
        :value="'新增'"
        :type="'primary'"
        :icon="'plus'"
        :plain="true"
        @click="addRoleFn"
      ></commonBtn>
      <commonBtn
        :value="'删除'"
        :type="'danger'"
        :icon="'delete'"
        :disabled="ids.length === 0"
        :plain="true"
        @click="delRoleFn"
      ></commonBtn>
    </el-row>
    <el-table
      :data="searchParam.data"
      ref="multipleTableRef"
      @selection-change="handleSelectionChange"
      v-loading="isLoad"
    >
      <el-table-column type="selection" width="55" class="center" />
      <el-table-column label="编号" align="center" show-overflow-tooltip>
        <template #default="scope">
          {{ (searchParam.current - 1) * searchParam.size + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="roleName"
        label="角色名称"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="排序"
        prop="roleSort"
        align="center"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.status == '0'">{{
            scope.row.statusDict
          }}</el-tag>
          <el-tag type="danger" v-if="scope.row.status == '1'">{{
            scope.row.statusDict
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="操作" fixed="right" align="center">
        <template #default="scope">
          <editBtn
            :value="'编辑'"
            @click="editRoleFn(scope.row)"
            v-if="scope.row.roleId != '0'"
          />
          <delBtn
            :value="'删除'"
            @click="delOne(scope.row.roleId)"
            v-if="scope.row.roleId != '0'"
          />
          <el-dropdown :trigger="'click'">
            <span class="el-dropdown-link"
              >更多
              <i class="el-icon-arrow-down"></i>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  @click="handleCommand(item.command, scope.row.roleId)"
                  v-for="(item, index) in moreData"
                  :key="index"
                >
                  <i :class="item.icon"></i>{{ item.label }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <pag
      :showPage="true"
      :pageData="searchParam"
      @getTableData="getTableData"
    />
    <addEdit
      :layer="layer"
      :statusArr="roleStatus"
      @getTableData="getTableData"
      v-if="layer.show"
    ></addEdit>

    <!-- 授权面板 -->
    <deawer :deawerObj="deawerObj" v-if="deawerObj.show"></deawer>
  </el-card>
</template>
<script>
import commonBtn from "_c/commonBtn/index.vue";
import { ref, reactive } from "vue";
import { getData, delRoles } from "@/api/role.js";
import editBtn from "_c/editBtn/index.vue";
import delBtn from "_c/delBtn/index.vue";
import pag from "_c/pag/index.vue";
import { queryDict } from "@/api/dictValue.js";
import { ElMessage, ElMessageBox } from "element-plus";
import addEdit from "./addEdit.vue";
import deawer from "./deawer.vue";
import { useRouter } from "vue-router";
export default {
  components: {
    commonBtn,
    editBtn,
    delBtn,
    pag,
    addEdit,
    deawer,
  },
  setup() {
    const router = useRouter();
    //表格加载
    const isLoad = ref(true);
    //更多渲染数据
    const moreData = ref([
      {
        icon: "el-icon-postcard",
        label: "授权",
        command: "a",
      },
      {
        icon: "el-icon-s-custom",
        label: "分配用户",
        command: "b",
      },
    ]);
    //授权面板显示开关
    const deawerObj = reactive({
      show: false,
      title: "",
      roleId: "",
    });
    // 弹窗控制器
    const layer = reactive({
      show: false,
      title: "新增",
      showButton: true,
      width: 500,
    });
    //表格引用
    const multipleTableRef = ref(null);
    //表单引用
    const searchRef = ref(null);
    //搜索条件
    const searchParam = reactive({
      roleName: "",
      status: "",
      data: [],
      current: 1, //页码
      size: 10, //每页显示条数
      total: 0, //数据总数
    });
    //角色状态
    const roleStatus = ref({});
    //需要删除的ids
    const ids = ref([]);
    //查询列表数据
    const getTableData = async () => {
      let params = {
        pageNum: searchParam.current,
        pageSize: searchParam.size,
        roleName: searchParam.roleName || undefined,
        status: searchParam.status || undefined,
      };
      const { data, success } = await getData(params);
      if (success) {
        searchParam.data = data.records;
        searchParam.total = parseInt(data.total);
        isLoad.value = false;
      }
    };
    getTableData();
    //获取角色状态
    const getRoleStatus = async () => {
      const { data, success } = await queryDict("role_status");
      if (success) {
        roleStatus.value = data;
      }
    };
    getRoleStatus();
    //搜索表单重置
    const refreshFn = () => {
      searchParam.roleName = "";
      searchParam.status = "";
      getTableData();
    };
    //多选操作
    const handleSelectionChange = (val) => {
      ids.value = [];
      if (val) {
        if (val.length > 0) {
          for (let i = 0; i < val.length; i++) {
            ids.value.push(val[i]["roleId"]);
          }
        }
      }
    };
    //删除角色
    const delRole = async () => {
      if (ids) {
        const { success } = await delRoles({ ids: ids.value });
        if (success) {
          ElMessage.success("删除成功");
          getTableData();
        }
      }
    };
    //批量删除
    const delRoleFn = () => {
      ElMessageBox.confirm("您确认要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delRole();
        })
        .catch(() => {
          if (!id) {
            proxy.$refs["multipleTableRef"].clearSelection();
          }
        });
    };
    //删除单个
    const delOne = (id) => {
      if (id) {
        ids.value = [];
        ids.value.push(id);
        ElMessageBox.confirm("您确认要删除吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            delRole();
          })
          .catch(() => {
            ids.value = [];
            ElMessage.info("取消成功！");
          });
      }
    };
    //新增角色弹框
    const addRoleFn = () => {
      layer.title = "新增角色";
      layer.show = true;
      delete layer.row;
    };
    //编辑角色弹框
    const editRoleFn = (row) => {
      layer.title = "编辑角色";
      layer.show = true;
      layer.row = row;
    };
    //展示授权面板
    const showDeawer = (roleId) => {
      deawerObj.title = "授权";
      deawerObj.roleId = roleId;
      deawerObj.show = true;
    };
    //更多处理函数
    const handleCommand = (command, roleId) => {
      if (command === "a") {
        showDeawer(roleId);
      }
      if (command === "b") {
        if (roleId) {
          //跳转页面
          router.push({ path: "ruser", query: { id: roleId } });
        }
      }
    };
    return {
      isLoad,
      moreData,
      deawerObj,
      layer,
      ids,
      multipleTableRef,
      searchRef,
      searchParam,
      roleStatus,
      getTableData,
      refreshFn,
      handleSelectionChange,
      delRoleFn,
      delOne,
      addRoleFn,
      editRoleFn,
      handleCommand,
    };
  },
};
</script>
<style lang="scss" scoped>
.el-form {
  display: flex;
  justify-content: left;
}
.el-table {
  margin-top: 15px;
}
.el-dropdown-link {
  margin-left: 10px;
  cursor: pointer;
  color: var(--el-color-primary);
  align-items: center;
  font-size: 12px;
}
</style>
